<template>

<div class="bigbox">

    
        <!-- <img src="https://upfile.asqql.com/2009pasdfasdfic2009s305985-ts/2019-6/201961817423681803.gif" alt=""> -->
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F017a7d5d6a51dda801211f9e154633.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663847924&t=b3c418110c18b9b459db488f26b8a331" alt="" class="bhi">
    

    <!-- 普通登录 -->
    <div class="smbox">
   <div v-if="this.qhnum===1">
       <p @click="qhnum=3">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-erweimajiaobiao1"></use>
        </svg>
       </p>
        <h4>后台管理系统</h4>

      <div class="form">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="rmeuleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="username">
        <el-input type="text" v-model="ruleForm.username" autocomplete="off" class="changkuan"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off" class="changkuan"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="Comple">
        <!-- 修改验证码长度拼接 -->
        <div class="xgyzmpj">
          <el-input v-model.number="ruleForm.Comple" class="yzmys" id="xgyj"></el-input>
          <span v-html="this.gyzm" @click="qhyz" v-loading="yzlodin">
          
        </span>
        </div>
        
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" class="tj">提交</el-button>
      </el-form-item>
    </el-form>

  </div>

    <div class="dxdr">
        <a href="#"  @click="qiehuan">切换短信登入</a>
    </div>
   </div>
    <!-- 普通登录结束 -->



    <!-- 短信登录 -->
          <div class="duanxin" v-else-if="this.qhnum===2">
            <p @click="zhujm">
              <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shouye"></use>
        </svg>
            </p>
            <h4>短信登录</h4>
            

            <div class="dxcenter">
              
              <div style="margin: 20px;"></div>
              <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                <el-form-item label="手机号">
                  <!-- 点击发送验证码 -->
                   <div class="djfsyzm">
                     <el-input v-model="phonenumber" class="sddyz"></el-input>
                     <span v-text="phoneyz" @click="fasonyz"></span>
                   </div>
                 
                  
                </el-form-item>


                <el-form-item label="验证码">
                  <el-input v-model="yzm"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary"  class="tj" @click="subdxj">提交</el-button>
                </el-form-item>
              </el-form>


              
            </div>
          </div>
    <!-- 短信登录结束 -->

    <!-- 二维码登录 -->
    <div class="ewmdl" v-else>
      <h4>二维码登录</h4>
      <p @click="qhnum=1">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shouye"></use>
        </svg>
      </p>
      <div class="pic" v-loading="false">
        <img :src="ewmdzt" width="150px" height="150px" alt="">
        <i class="mask" v-if="showQ"></i>
      </div>
    </div>
    <!-- 二维码登录结束 -->


    </div>





</div>
</template>

<script>

// 二维码阶段
import socketIo from 'socket.io-client'
import qrcode from "qrcode"


// 二维码阶段


 // 校验验证码
      var checkAge = (rule, value, callback) => {
        if(value){
            callback()
        }else{
            callback('验证码必须为5位')
        }
        
        // if (!value) {
        //   return callback(new Error('验证码必须为5位'));
        // }
       
      };

    //   校验用户名
      var validatePass = (rule, value, callback) => {
        var userNamePattern = /^[a-zA-Z0-9_-]{3,16}$/;
        if(userNamePattern.test(value)){
            callback()
        }else{
            callback('用户名可以是字母数字下划线,3-12位')
        }
        // if (value === '') {
        //   callback(new Error('用户名可以是字母数字下划线,3-12位'));
        // } else {
        //   if (this.ruleForm.password !== '') {
        //     this.$refs.ruleForm.validateField('password');
        //   }
        //   callback();
        // }
      };



    //   校验密码
      var validatePass2 = (rule, value, callback) => {
        if(value){
            callback()
        }else{
            callback('请输入密码')
        }
        // if (value === '') {
        //   callback(new Error('密码长度不能超过三位'));
        // } else if (value !== this.ruleForm.uname) {
        //   callback(new Error('两次输入密码不一致!'));
        // } else {
        //   callback();
        // }
      };

      import * as api from '../../api/login'
      import strong from '@/utils/strong'



  export default {
    userss: {
            type: Function,
            require: true
        },

    // 微信二维码区域
    created(){
      let io = socketIo('wss://chst.vip')
      io.on('connectSuccess',async({sid,state})=>{
        // console.log(sid);
        let res = await api.getewm(sid)
        // console.log(res);
        let {scanCodeUrl:scu} = res.data

        qrcode.toDataURL(scu,(err,img)=>{
          if(err){
            throw err
          }
          // console.log(img);
          this.ewmdzt = img
        })
      })


      // 无效二维码
      io.on('invalidCode',data =>{
        // console.log(data);
      })


      // 扫码成功
      io.on('scancodeSuccess',async({state,wechatCode,msg}) => {
        if(state){
          let res = await api.wxsmdl(wechatCode)
          // console.log(res);
        }else{
          // console.err(msg);
        }
        // console.log(data);
      })
    },
    // 微信二维码区域







    mounted(){
      this.huoquyzm()
    },
    data() {
       
      return {
        // 手机点击发送验证码
        phoneyz:'点击发送验证码',
        yzlodin:false,
        // 点击验证码防抖
        yzflag:true,
        // 二维码图
        showQ:false,
        ewmdzt:'',
        qhnum:1,

        // 获取到的验证码
        gyzm :'',



        phonenumber:'',
        yzm:'',
        ruleForm: {
          username: '',
          password: '',
          Comple: ''
        },
        rules: {
          uname: [
            { validator: validatePass, trigger: 'blur' }
          ],
          password: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          Comple: [
            { validator: checkAge, trigger: 'blur' }
          ]
        },

        // 短信登录页
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '',
          type: ''
        }
      };
    },
    methods: {

      qhyz(){
        this.huoquyzm()
      },

      // 封装一个获取验证码方法
      huoquyzm(){
        this.yzlodin=true
        api.grtyzm()
        .then(res =>{
          // console.log(res);
        this.yzlodin=false
          this.gyzm = res.data.img
      })
      },
      // 获取验证码方法完成

    // 封装一个方法存储用户信息
    usermess({permission,token,userInfo}){
      this.$store.commit('users/YHLODA',userInfo)
      strong.set('userInfo', userInfo)
			strong.set('qf-token', token)
			strong.set('permission', permission)
      // strong.log(r);

    },
    // 存储用户信息方法完成




    // 点击发送手机验证码
    async fasonyz(){
      if(this.yzflag){
        this.yzflag = false

        let res = await api.jieshouyzm(this.phonenumber)
        // console.log(res);

        if(res.data.state){
          this.$message({
          message: '短信发送成功，请注意查看',
          type: 'success'
        })
        }else{
          this.$message.error('发送失败，请检查手机号');
        }
        
        let miao = 5
        this.phoneyz = `${miao}后结束`

        let ddd = setInterval(()=>{
          miao--
          if(miao>0){
        this.phoneyz = `${miao}后结束`

            
          }else{
            this.phoneyz = '点击获取验证码'
            this.yzflag = true
            clearInterval(ddd)
          }
        },1000)
      }
    },

    // 校验验证码
    async subdxj(){
      let res = await api.shouyzm(this.yzm)
      // console.log(res);
      this.userss(res.data)
      this.$router.push('/home')
    },

      


      qiehuan(){
        this.qhnum = 2
      },
      zhujm(){
        this.qhnum = 1
      },
      submitForm() {
        this.$refs['rmeuleForm'].validate((vali) => {
          if (vali) {
            // alert('submit!');
            api.jyyzm(this.ruleForm.Comple)
            .then(async res =>{
              if(res.data.state){
                let {username,password} = this.ruleForm
                let res =await api.logdl(username,password)
                // console.log(rees);

                this.usermess(res.data)
                this.$router.push('/')
              }else{
                this.huoquyzm()
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        // this.ruleForm =''
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="less" scoped>
.icon {
  width: 50px;
  height: 50px;
  // vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}




/deep/.bigbox{
    width: 100%;
    height: 100%;
    position: relative !important;
    
}
.xgyzmpj{
  display: flex;
  width: 250px;
  .yzmys{
    width: 100px;
    height: 40px;
    border-radius:   5px 0  0 5px;
    background-color: #fff;
    


  }
  span{
    width: 150px;
    height: 40px;
    background-color: white;
    border-radius:  0 5px 5px 0;
    // margin-top: 1px;
  }
}





/deep/.bhi{
        // width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0 !important;
    }

/deep/.smbox{
    width: 400px;
    // height: 600px;
    // border:  1px solid red;
    position: absolute;
    top: 150px;
    right: 50px;
    background: rgb(0 0 0 /10%);
    
    // text-align: center;

    
    h4{
        text-align: center;
        margin: 60px auto;
    }
    
}
/deep/p{
      width: 50px ;
      height: 50px ;
      // background-color: red ;
      margin: 0;
      position: absolute;
      top: 0;
      right: 0;
    }
/deep/.changkuan{
    width: 300px !important;
}
/deep/.tj{
    width: 250px;
    margin-bottom: 20px !important;
}
/deep/.form{
    width: 400px;
   margin: 60px auto;
    // text-align: center;
    display: flex;
    justify-content: center ;
}
/deep/.demo-ruleForm{
    width: 400px;
     
    // background-color: red;
    
    // margin-left: 20px;
    // text-align: center;
    
}
/deep/.dxdr{
    width: 400px;
    height: 50px;
    text-align: center;
    margin-top: 20px;
}

/deep/.el-form-item__label{
    color:black;
}

/deep/.changkuan {
  width: 250px !important;
}


// 短信登录开始
.duanxin{
  .dxcenter{
    width: 300px;
    display: flex;
    justify-content: center;
  }
}

.djfsyzm{
  display: flex;
  .sddyz{
    width: 150px;
    background-color: #fff;
    // background-color: red;

  }
  span{
    width: 100px;
        color: rgb(136, 136, 136);
    text-decoration: underline;
    background-color: #fff;
    border-radius: 0px 5px 5px 0;
  }
}

/deep/.el-input__inner{
  border: 1px solid #fff !important;
}
// 短信登录结束

// 二维码界面开始
.ewmdl{
  .pic{
    width: 400px;
    height: 200px;
    text-align: center;
    // background-color: red;

  }
}
.mask {
            width: 150px;
            height: 150px;
            opacity: 0.8;
            background-color: #fff;
            position: absolute;
            left: 120px;
            // background-image: url("../../assets/img/scancode.png");
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
        }

</style>